<div class="login update-password">
  <div class="header">
    {{#if firstLogin}}
      <h1>{{t 'modalEditPassword.firstLogin.title' appName=settings.appName}}</h1>
    {{else}}
      <h1>{{t 'modalEditPassword.edit.title' appName=settings.appName}}</h1>
    {{/if}}
  </div>
  {{#if firstLogin}}
    <h3 class="mt-20 text-left">{{t 'modalEditPassword.firstLogin.help' htmlSafe=true}}</h3>
  {{/if}}
  {{#input-edit-password
      complete=(action (action complete))
      user=model.user
      showCurrent=showCurrent
      forceSaveDisabled=(and firstLogin (or (not agreedToEula) (not landing)))
      currentPassword=currentPassword
      editButton=(if firstLogin 'modalEditPassword.firstLogin.actionButton' 'modalEditPassword.actionButton')
      cancelDisabled=true
  }}
    {{#if firstLogin}}
      <hr/>
      <h3 class="mt-20 text-left">{{t 'modalEditPassword.firstLogin.setView'}}{{field-required}}</h3>
      <div class="image-radio-container mt-20">
        <label class="image-radio" {{action "setView" "ember" preventDefault=false}}>
          <button class="mb-5 {{if (eq landing 'ember') 'checked' ''}}" type="button">
            <img src="{{app.baseAssets}}assets/images/cluster-multi.svg"/>
          </button>
          {{radio-button selection=landing value="ember"}}
          {{t "landingPage.emberLong" }}
        </label>

        <label class="image-radio" {{action "setView" "vue" preventDefault=false}}>
          <button class="mb-5 {{if (eq landing 'vue') 'checked' ''}}" type="button">
            <img src="{{app.baseAssets}}assets/images/cluster-single.svg"/>
          </button>
          {{radio-button selection=landing value="vue"}}
          {{t "landingPage.vueLong" }}
        </label>
      </div>

      <hr/>
      <div class="mt-20">
        <label class="text-small">{{input type="checkbox" checked=model.optIn}} {{t 'telemetryOpt.label'}}</label> <a href="{{settings.docsBase}}/faq/telemetry" class="text-small" target="_blank" rel="noopener nofollow">{{t 'telemetryOpt.learnMore.label'}}</a>
      </div>
      <div>
        <label class="text-small">{{input type="checkbox" checked=agreedToEula}} {{t 'telemetryOpt.eula.prefix' appName=settings.appName}} <a href="{{settings.eulaLink}}" target="_blank" rel="noopener nofollow">{{t 'telemetryOpt.eula.link' appName=settings.appName}}</a> {{t 'telemetryOpt.eula.suffix' appName=settings.appName}}{{field-required}}</label>
      </div>
    {{/if}}
  {{/input-edit-password}}
</div>
